<template>
	<div class="login-container bg-f" style="height: 100vh;position: relative;">
		<div class="" style="height: 100px;width: 100%;">
			<img src="../../static/logo/gouhuo.png">
		</div>
		<div class="bg-f"
			:style="`height:${height-175}px;width:100%;margin-top:-27px;position: absolute;border-radius: 30px 30px 0px 0px;`"
			style="box-sizing: border-box;padding: 0px 20px;">
			<div class="" style="margin-top: 40px;">
				<div class=""
					style="margin-bottom: 13px;font-size: 14px;font-weight: 500;font-family: auto;color: #BBBBBB;">
					账号
				</div>
				<div class="flex-align" style="height: 51px;background: #F2F2F4; border-radius: 10px;">
					<input type="number" v-model="username"
						style="outline:none;border:0px;background: #F2F2F4;padding-left: 10px;width:100%"
						placeholder="请输入账号(数字)" />
				</div>
			</div>
			<div class="" style="margin-top: 20px;">
				<div class=""
					style="margin-bottom: 13px;font-size: 14px;font-weight: 500;font-family: auto;color: #BBBBBB;">
					密码
				</div>
				<div class="flex-space flex-c" style="height: 51px;background: #F2F2F4; border-radius: 10px;">
					<!-- :type="eaey==true ? 'password' : 'text'" -->
					<input :type="pass" v-model="password"
						style="outline:none;border:0px;background: #F2F2F4;padding-left: 10px;width:100%"
						placeholder="请输入密码" />
					<span id="" @click="easy">
						<img style="width: 21px;height:13px;margin-right: 20px;" src="../../static/invisible2x.png"
							v-if="eaey">
						<img style="width: 21px;height:13px;margin-right: 20px;" src="../../static/so2x.png" v-else>
					</span>
				</div>
			</div>
			<!-- 选择付款的方式 -->
			<view class="" style="background-color: #fa3534;margin-top: 10px; color: #FFFFFF;">
				<u-dropdown>
					<u-dropdown-item v-model="value1" title="选择支付的方式" :options="options1"></u-dropdown-item>

				</u-dropdown>
			</view>
			<!-- 支付订单号 -->
			<view class="" style="background: #F2F2F4; border-radius: 10px;margin-top: 20px;padding: 0px 10px;">
				<view class="flex-align" style="height: 51px; ">
					<view class="" style="font-family: serif;font-weight: bold;font-size: 15px;">
						请输入支付单号:
					</view>
					<view class=" " style="margin-right: 10px;">
						<input type="text" v-model="dingdannum" style="border: 1px solid ; " />
					</view>
				</view>
				<view class="" style="text-align: end; color: #0580FF;padding-bottom: 5px;">
					<text style="margin-right: 30px;" @click="showgo">去支付</text><text @click="showup">获取订单号</text>
				</view>

			</view>
			<view class="flex-xycenter"
				style="width: 100%;  font-size: 14px;  font-weight: bold; height: 39px;  ;margin-top: 20px;margin-right: 20px;background-color: wheat;">
				<view class="">
					验证问题:
				</view>
				<view class="" style="font-size: 22px;
    font-family: fantasy;margin:0px 10px;">
					<text style="color: red;">{{num1}}</text>+{{num2}}=
				</view>
				<view class=" " style="margin-right: 10px;">
					<input type="number" @blur="searnum" @input="searnum" v-model="passnum"
						style="border: 1px solid ;width: 60px;text-align: center;" />
				</view>
				<view class="" v-if="showpandaun">
					<image src="../../static/logo/duihao2-b.png" mode="" style="width: 20px;height: 20px;"
						v-if="ifpanduan"></image>
					<image src="../../static/logo/cuo.png" mode="" style="width: 20px;height: 20px;" v-else></image>
				</view>
			</view>
			<view class="flex-xycenter" style="width: 100%;">
				<div class="flex-xycenter" style="margin-top: 22px;font-size: 16px;font-weight: bold;width: 80%;font-family: auto;color: #FFFFFF;background: #0580FF;padding: 11px  0px;
			border-radius: 10px;" @click="insert">
					注册账户
				</div>
			</view>
		</div>
		<view>
			<u-popup v-model="showdingd" mode="center" :closeable="true">
				<view class="" style="padding: 10px;">
					<view class="" style="text-align: center;    font-size: 18px; font-weight: bold;margin-top: 30px;">
						支付成功之后如何查找自己的订单号
					</view>
					<view class="" style="margin-top: 20px;">
						<view class="" style="font-weight: bold;">
							举例:你如果是QQ扫码支付的
						</view>
						<view class="">
							1.打开QQ点击我的QQ钱包
						</view>
						<view class="">
							2.点击余额
						</view>
						<view class="">
							3.点击右上角的交易记录
						</view>
						<view class="">
							4.找到你的支付账单会有交易<text style="color: red;font-weight: bold;">订单号</text>进行复制
						</view>
					</view>
					<view class="" style="margin-top: 20px;">
						<view class="" style="font-weight: bold;">
							举例:你如果是微信扫码支付的
						</view>
						<view class="">
							1.打开微信点击我的
						</view>
						<view class="">
							2.点击支付
						</view>
						<view class="">
							3.点击钱包
						</view>
						<view class="">
							4.点击右上角的账单
						</view>
						<view class="">
							5.点击你的付款记录点击进去复制转账<text style="color: red;font-weight: bold;">订单号</text>
						</view>
					</view>
					<view class="" style="margin-top: 20px;">
						<view class="" style="font-weight: bold;">
							举例:你如果是支付宝扫码支付的
						</view>
						<view class="">
							1.打开支付宝点击我的
						</view>
						<view class="">
							2.点击账单
						</view>
						<view class="">
							3.找到你的支付账单点击进去会有<text style="color: red;font-weight: bold;">订单号</text>进行复制
						</view> 
					</view>
				</view> 
			</u-popup>
			<u-popup v-model="show" mode="center" width="100%" height="100vh" :closeable="true">
				<scroll-view scroll-y="true" style="height: 100vh;">
					<view class="" style="margin: 40px 0px 6px;">
						<view class="flex-xycenter"
							style=" font-size: 22px;font-weight: bold;font-family: 'Courier New', Courier, monospace;color: red;">
							注册成功即为会员VIP
						</view>
						<view class="flex-xycenter"
							style=" font-size: 13px;font-weight: bold;font-family: 'Courier New', Courier, monospace;color: red;">
							注册成功就送66.66当天可提现(最终活动权归发布人所有)
						</view>
					</view>
					<view class="" style="margin: 0px 0px;">
						<view class="flex-xycenter" style="background: #19BE6B;color: #FFFFFF;padding: 10px 0px;">
							微信支付
						</view>
					</view>
					<view class="flex-xycenter" style="">
						<image src="../../static/wxmony.png" mode="" style="width: 200px;height:200px;"></image>
					</view> 
					<view class="" style="margin: 10px 0px 0px;">
						<view class="flex-xycenter" style="background: #19BE6B;color: #FFFFFF;padding: 10px 0px;">
							QQ支付
						</view>
					</view>
					<view class="flex-xycenter" style="">
						<image src="../../static/qq.png" mode="" style="width: 200px;height:200px;"></image>
					</view>
					<view class="" style="margin: 10px 0px 0px;">
						<view class="flex-xycenter" style="background: #19BE6B;color: #FFFFFF;padding: 10px 0px;">
							支付宝支付
						</view>
					</view>
					<view class="flex-xycenter" style="">
						<image src="../../static/zfb.png" mode="" style="width: 200px;height:200px;"></image>
					</view>
				</scroll-view> 
			</u-popup>
		</view>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				show: false, //弹出收款二维码模态框
				showdingd: false, //控制填写二维码的教学
				dingdannum: '', //订单号
				height: 500,
				username: '',
				password: '',
				pass: 'password',
				eaey: true,
				num1: '',
				num2: '',
				passnum: '', //输入的随机号
				showpandaun: false, //控制对错的弹出
				ifpanduan: Boolean, //控制对错的切换
				value1: 1, //付款的方式
				options1: [{
						label: '微信支付',
						value: 1,
					},
					{
						label: 'QQ支付',
						value: 2,
					},
					{
						label: '支付宝支付',
						value: 3,
					}
				],
			}
		},
		onShow() {
			this.randomcell()
		},
		mounted() {
			this.client() //获取高度
		},
		methods: {
			showgo() {
				this.show = true;
			},
			showup() {
				this.showdingd = true;
			},
			searnum() {
				this.showpandaun = true;
				if (this.num1 + this.num2 == this.passnum) {
					this.ifpanduan = true
				} else {
					this.ifpanduan = false
				}
			},
			// 随机数
			randomcell() {
				this.num1 = Math.ceil(Math.random() * 10);
				this.num2 = Math.round(Math.random());;
			},
			easy() {
				this.eaey = !this.eaey;
				if (this.eaey) {
					this.pass = 'password'
				} else {
					this.pass = 'text'
				}
			},
			client() {
				this.$nextTick(() => {
					this.height = document.body.clientHeight
				})
			},
			handleLogin() {},
			insert() {
				if (this.username && this.password && this.passnum && this.ifpanduan) {
					uni.navigateTo({
						url: '../logo/logo'
					})
				} else {
					uni.showToast({
						title: '请检测信息格式正确',
						icon: 'none'
					})
				}
			}
		}
	}
</script>


<style lang="scss">
	/* 修复input 背景不协调 和光标变色 */
	/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
	// 背景改白色
	$bg: #fff;
	$light_gray: #fff;
	$cursor: #fff;
</style>
<style lang="scss" scoped>
	// 背景改白色
	$bg: #f7f8fa;
	$dark_gray: #889aa4;
	$light_gray: #eee;

	.bg-f {
		border-radius: 5px;
		background-color: #FFFFFF;
	}

	.login-container {
		box-sizing: border-box;
		overflow: hidden;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.u-dropdown__menu__item__text span {
		color: #FFFFFF;
	}
</style>
